import Vue from 'vue'
import App from './App.vue'
// 1. 引入vuex
import Vuex from 'vuex'

// 2. 将vuex注册到vue中
Vue.use(Vuex); // Vue.use()实际上是调用了Vuex中的install()方法.

// 3. 实例化vuex对象
const store = new Vuex.Store({
    // 5. 实例化vuex的构造参数: state/mutations/actions 
    state: {
        // 存储状态
        name: '馒头',
        age: 1,
        sex: '男',
        addr: '武汉'
    },
    // 6. 想要修改state的值, 必须通过mutations.
    mutations: {
        updateName(state, payload) { // 通过payload传参修改state中name的值.
            state.name = payload;
        },

        // 用于测试actions
        updateActionsAge(state, payload) { // 修改state中age的值
            state.age += payload
        },
    },
    // 7. 异步操作
    actions: {
        // actions的函数有两个参数
        // 参数1: 上下文对象, context 相当于组件中的this.$store.
        // 参数2: 载荷 payload
        updateAsyncAge(context) { // 更新state中age的值
            setTimeout(function() {
                // actions不能直接修改state的值, 需要将修改的操作提交给mutations
                context.commit('updateActionsAge', 5) // 提交给mutations的updateAge
            }, 1000)
        },
        // 带参数传递
        updateAsyncAge2(context, payload) { // 更新state中age的值
            setTimeout(function() {
                // actions不能直接修改state的值, 需要将修改的操作提交给mutations
                context.commit('updateActionsAge', payload) // 提交给mutations的updateAge
            }, 1000)
        },

        // 方式2 借助辅助函数
        updateNameActions(context, payload) {
            context.commit('updateName', payload)
        }
    }
});

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    store // 4. 将Vuex(或叫store)对象挂载到根组件中.
}).$mount('#app')